<template>
  <div class="echart-box" :style="{width: '100%', height: '100%'}">
    <div id="lineChart" :style="{width: '98%', height: '98%'}"></div>
    <a-modal
      v-if="result" 
      v-model="visible" 
      title="统计结果" 
      :footer="null"
    >
      <p class="fx-box">
        <span class="fx-title">总观测数</span>
        <span class="fx-value">{{ all_num || 0 }}</span>
      </p>
      <p class="fx-box">
        <span class="fx-title">缺失率</span>
        <span class="fx-value">{{ result.miss_rate || 0 }}%</span>
      </p>
      <p class="fx-box">
        <span class="fx-title">最大值</span>
        <span class="fx-value">{{ result.max_value || 0 }}</span>
      </p>
      <p class="fx-box">
        <span class="fx-title">上1/4位数</span>
        <span class="fx-value">{{ result.up_quantile || 0 }}</span>
      </p>
      <p class="fx-box">
        <span class="fx-title">中位数</span>
        <span class="fx-value">{{ result.median || 0 }}</span>
      </p>
      <p class="fx-box">
        <span class="fx-title">下1/4位数</span>
        <span class="fx-value">{{ result.lower_quantile || 0 }}</span>
      </p>
      <p class="fx-box">
        <span class="fx-title">最小值</span>
        <span class="fx-value">{{ result.min_value || 0 }}</span>
      </p>
      <p class="fx-box">
        <span class="fx-title">平均值</span>
        <span class="fx-value">{{ result.avg_value || 0 }}</span>
      </p>
      <p class="fx-box">
        <span class="fx-title">标准差</span>
        <span class="fx-value">{{ result.std || 0 }}</span>
      </p>
    </a-modal>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  props: {
    xData: {
      type: Array,
      required: true
    },
    yData: {
      type: Array,
      required: true
    },
    result:{
      type: Object
    },
    all_num: {
      type: String | Number,
    }
  },
  data() {
    return {
      visible:true,
      myChart: null,
      sampleName: false,
      varName: false,
      subType: false,
      subNumber: false,
    }
  },
  mounted() {
    setTimeout(() => {
      this.drawLine()
    })
    window.addEventListener('resize', this.resizeChart)
  },
  activated() {
    if(this.myChart){
      this.resizeChart()
    }
  },
  methods: {
    resizeChart() {
      this.myChart.resize()
    },
    drawLine() {
      const colorList = []
      for (let index = 0; index < this.xData.length; index++) {
        colorList.push('#49a9ee', '#98d87d', '#ffd86e', '#f3857b', '#8996e6')
      }
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById('lineChart'))
      // 绘制图表
      const { result,sampleName,varName,subType,subNumber,xData,yData } = this
      this.myChart.setOption({
        title:{
          text:sampleName?`分析数据集-${sampleName}`:'',
          subtext :
          (varName?`分析字段: ${varName}\n`:'') +
          (subType? `分箱方式: ${subType}\n`:'') +
          (subNumber? `分箱个数: ${subNumber}`:'')
        },
        backgroundColor: '#fff',
        toolbox:{
          feature:{
            saveAsImage:{
              type:'png',
              name:'统计分析'
            },
            myResult:{
              show:result.have,
              title:'查看统计结果',
              icon:'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
              onclick:()=>{
                this.visible = true
              }
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#fff',
            },
          },
        },
        grid: {
            top: '15%',
            left: '2%',
            right: '3%',
            bottom: '10%',
            containLabel: true
        },
        calculable: true,
        xAxis: [{
            type: 'category',
            color: '#59588D',
            axisLine: {
                show: true,
                lineStyle: {
                  color: '#d8d8d8',
                  width: 1
                },
            },
            axisTick: {
                show: false
            },
            // boundaryGap: false,
            axisLabel: {
                color: '#999'
            },
            data: xData,

        }],

        yAxis: [{
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#737373',
                    opacity:0.2,
                    type: 'dashed'
                }
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                margin: 20,
                textStyle: {
                    color: '#999',
                },
            },
            axisTick: {
                show: false,
            },
        }],
        dataZoom: [
          {
            show: true,
            height: 18,
            xAxisIndex: [0],
            bottom: 10,
            start: 0,
            end: 100,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle:{
              color:"#d3dee5",
            },
            textStyle:{
              color:"#fff"
            },
            fillerColor: '#dce2eb',
            borderColor:"#dddddd"
          }, {
            type: "inside",
            show: true,
            height: 15,
            start: 0,
            end: 35
        }],
        series: [{
            name: '折线',
            type: 'line',
            smooth: true, //是否平滑
            showSymbol: false,
            symbol: 'circle',
            symbolSize: 4,
            lineStyle: {
                normal: {
                    color: "#737373"
                },
            },
            label: {
                show: false,
                position: 'top',
                textStyle: {
                    color: '#737373',
                }
            },

            itemStyle: {
                color: "#FFF",
                borderColor: "#737373",
                borderWidth: 1,

            },
            tooltip: {
                show: true
            },
            data: yData,
        },{
          name: '周转量',
          type: 'bar',
          // "stack": "总量",
          barMaxWidth: 35,
          barGap: '10%',
          itemStyle: {
            normal: {
              barBorderRadius: 0,
              color: (params) => {
                return colorList[params.dataIndex]
              }
            },
          },
          data: yData,
        }]
      })
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeChart)
  }
}
</script>
